<template lang="pug">
  .addresses.head-page(v-if='isShow', ref="addrWrap")
    HeadBar(title="地址管理", @closeBar="isShow = false")
    //- 地址列表
    van-address-list(
      v-model="addrId",
      :list="addrList",
      @select="chooseAddr",
      @add="showPanel('isNewAddr')",
      @edit="onEditAddress")

    //- 编辑修改地址
    .editor-address(
      :class="isEditor ? 'animated bounceInUp' : '' ",
      v-show="isEditor")
      .close.pos-a.tac(@click="showPanel('isEditor')")
        i.iconfont.icon-close
      .wrap.pos-a
        h2.tac 修改地址
          a.pos-a(href="javascript:;", @click="deleteAddrItem")
            i.iconfont.icon-trash
            | 删除地址
        van-cell-group
          van-field(
            v-model="addressObj.name",
            label="收货人",
            placeholder="请输入用户名",
            required,
            @click-icon="addressObj.name = ''")
          van-field(
            v-model="addressObj.mobile",
            label="手机",
            placeholder="请输入手机号码",
            required,
            @click-icon="addressObj.mobile = ''")

          van-field(
            v-model="addressObj.local",
            label="收件地区",
            icon="arrow",
            placeholder="请选择省市区",
            @click.native="showPanel('isArea')",
            @blur="showPanel('isArea')")

          van-field(
            v-model="addressObj.address",
            label="详细地址",
            placeholder="请输入详细地址",
            @click-icon="addressObj.address = ''")
        .addr-btn-group.nt20
          van-button(
          type="primary",
          size="large",
          @click="saveEditorAddress") 保存

    //- 城市选择
    .area-wrap(v-if="isArea")
      van-area(
      v-if="isArea",
      :area-list="areaList",
      @confirm="confirmArea",
      columns-num="2",
      @cancel="hidePanel('isArea')")

    //- 添加地址
    .add-new-address(
      :class="isNewAddr ? 'animated bounceInUp' : '' ",
      v-if="isNewAddr")
      .close.pos-a.tac(@click="hidePanel('isNewAddr')")
        i.iconfont &#xe60b;
      .wrap.pos-a
        h2.tac 添加地址
        van-address-edit(
          :area-list="areaList",
          :show-postal="false",
          :show-set-default="true",
          :columns-num="2",
          @change-area="chooseArea",
          show-search-result,
          @save="onSaveNewAddr")
</template>

<script>
import cityList from '@/data/city-app.json'
import headBarMixin  from '@/mixins/headBar'
import { mapGetters } from 'vuex'

export default {
  name: 'addressList',
  mixins: [headBarMixin],
  data() {
    return {
      isShow: false,
      isEditor: false,
      isArea: false,
      isNewAddr: false,
      addressObj: {
        addressid: '',
        name: '',
        mobile: '',
        province: '',
        city: '',
        address: '',
        number: '',
        local: ''
      },
      areaList: cityList,
      searchResult: [],
      addrId: null,
      addrList: []
    }
  },
  mounted() {
    this.$vgo.on('address:show', () => {

      this.isShow = true
      const addrDom = this.$refs.addrWrap
      if(addrDom) {
        this.$refs.addrWrap.style.zIndex = '102'
      }
    })
  },
  computed: {
    ...mapGetters(['addressList']),
    getAddressList() {
      if(this.addressList) {
        return this.addressList
      }
    }
  },
  methods: {
    showPanel(type) {
      this[type] = true
    },
    hidePanel(type) {
      this[type] = false
    },
    // 编辑选择的地址
    chooseAddr(item, index) {
      this.addrId = item.id
      const data = {
        addressid: item.id,
        province: item.province,
        city: item.city,
        number: item.postalCode || item.areaCode,
        address: item.address,
        name: item.name,
        mobile: item.tel
      }
      this.$vgo.emit('choose:address', data)
      this.hidePanel('isShow')
      this.$refs.addrWrap.style.zIndex = '100'
    },
    // 编辑地址
    onEditAddress(item, index) {
      this.showPanel('isEditor')
      let addr = item.address.split(' ')

      this.addressObj.addressid = item.id
      this.addressObj.name = item.name
      this.addressObj.mobile = item.mobile
      this.addressObj.province = item.province
      this.addressObj.city = item.city
      this.addressObj.local = item.province + item.city
      this.addressObj.address = item.address
      this.addressObj.number = item.number
    },
    chooseArea(area) {
      console.log(area)
    },
    // 保存修改
    saveEditorAddress() {
      this.$store.dispatch('addOrUpdateAddress', this.addressObj)
      this.hidePanel('isEditor')
    },
    // 城市选择确定
    confirmArea(val) {
      // val => [{name: '北京市'}, {name: '朝阳区'}]
      this.addressObj.local = val[0].name + val[1].name
      this.addressObj.province = val[0].name
      this.addressObj.city = val[1].name
      this.hidePanel('isArea')
    },
    // 保存新增地址
    onSaveNewAddr(content) {
      const options = {
        addressid: 0,
        province: content.province,
        city: content.city,
        number: content.postalCode || content.areaCode,
        address: content.addressDetail,
        name: content.name,
        mobile: content.tel
      }
      this.$store.dispatch('addOrUpdateAddress', options)
      this.hidePanel('isNewAddr')
    },
    // 删除地址
    deleteAddrItem() {
      this.$vgo.open(() => {
        this.addrList.map((item, idx) => {
          if(item.id == this.addressObj.addressid) {
            this.$store.dispatch('delAddress', this.addressObj.addressid)

            this.addrList.splice(idx, 1)
            this.hidePanel('isEditor')
          }
        })
      })
    }
  },
  watch: {
    addressList(data) {
      if(data) {
        this.addrList = []
        data.map(item => {
          item.tel = item.mobile
          item.id = item.addressid
          this.addrList.push(item)
        })
        this.addrId = data[0].addressid
      }
    },
    immediate: true
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/color.styl'
.addresses
  z-index: 102
.van-address-list__add
  z-index: 10 !important;
.editor-address,.area-wrap, .add-new-address
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  transition: top .6s
  background: $white
  z-index: 100
  .close
    width: 30px
    line-height: 30px
    right: 10px
    top: 10px
    i
      color: $white
      font-size: 24px
  .wrap
    background: $white
    bottom: 0
    width: 100%
    padding: 20px 0 60px 0
    h2
      font-size: 18px
      color: $black-dark
      line-height: 40px
      margin-bottom: 20px

.editor-address
  h2 a
    font-size: 14px
    color: $primary
    right: 15px
  .addr-btn-group
    padding: 0 10px
    margin-top: 30px
  .van-cell-group
    padding-bottom: 20px

.area-wrap
  top: 0
  padding-top: 110%

.editor-address
  height: 100%
  padding: 20px 0
  background: rgba(0, 0, 0, .6)

.add-new-address
  background: rgba(0, 0, 0, .6)

</style>
